<template>
	<div :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';

export default {
	props: {
		height:{
			type:String,
			default:'70px'
		},
		width:{
			type:String,
			default:'100%'
		},
	},
	data() {
		return {
			chart:{}
		};
	},
	watch:{
		data(){
			this.init()
		}
	},
	methods:{
		init(){
            this.chart = echarts.init(this.$el);

            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{b}: {c}"
                },
                series: [{
                    color: ['#0fb1f4', '#1fd496', '#ffba00', '#bc26ee'],
                    type: 'pie',
                    center: ['50%', '50%'],
                    radius: ['50', '73'],
                    avoidLabelOverlap: true,
                    clockwise: false,
                    startAngle: 180,
                    label: {
                        normal: {
                            show: true,
                            position: 'outter',
                            formatter: '{b|{b}}\n{d|{d}%}',
                            lineHeight: 20,
                            rich: {
                                b: {
                                    fontSize: 16,
                                    color: '#fff'
                                },
                                d: {
                                    fontSize: 18,
                                    fontFamily: 'digifacewideregular'
                                }
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: '#007a9c'
                            },
                            length: 15,
                            length2: 20
                        }
                    },
                    itemStyle: {
                        shadowBlur: '5',
                        shadowColor: 'rgba(255,255,255,0.3)'
                    },
                    roundCap: 2,
                    data: [{
                        value: 18,
                        name: '载货汽车'
                    }, {
                        value: 23,
                        name: '液压平板车'
                    }, {
                        value: 12,
                        name: '普通平板车'
                    }, {
                        value: 22,
                        name: '牵引车'
                    }, ]
                }, {
                    color: ['rgba(255,255,255,0.25)'],
                    type: 'pie',
                    center: ['50%', '50%'],
                    radius: ['50', '60'],
                    avoidLabelOverlap: false,
                    clockwise: false,
                    startAngle: 180,
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    tooltip: {
                        show: false
                    },
                    hoverAnimation: false,
                    legendHoverLink: false,
                    data: [{
                        value: 1,
                        name: ''
                    }]
                }]
            };

            this.chart.setOption(option);
            var index1 = 0;
            let this_ = this;
            setInterval(function() {
                var dataLength = option.series[0].data.length;
                // 取消之前高亮的图形
                this_.chart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: index1
                });
                index1 = (index1 + 1) % dataLength;
                // 高亮当前图形
                this_.chart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: index1
                });
            }, 3000);
		}
	},
	mounted() {
        setTimeout(() => {
			this.init()
		}, 20)
	},
};
</script>

<style scoped lang="less">
</style>
